<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }

        .alert-dismissable, .alert-dismissible {
            padding-right: 35px;
        }

        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .button.close {
            -webkit-appearance: none;
            padding: 0;
            cursor: pointer;
            background: 0 0;
            border: 0;
        }

        .close {
            float: right;
            font-size: 21px;
            font-weight: 700;
            line-height: 1;
            color: #000;
            text-shadow: 0 1px 0 #fff;
            filter: alpha(opacity=20);
            opacity: .2;
        }

        .guys{
            color: #fff;
            background-color: #d91fd2;
            border-color: #ce9cd4
        }

    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">菜鸟教程</a>
        </div>
        <div>
            <p class="navbar-text">Runoob 用户登录</p>
        </div>
    </div>
</nav>

<ol class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">任务页面</a></li>
    <li class="active">todo</li>
</ol>


<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            todo list
        </h3>
    </div>
    <div class="panel-body">

        <form  role="form">

            <div class="row">
                <div class="col-lg-2">
                    <input type="text"  value="" class="form-control" placeholder="请输入任务名称" id="input_task" />
                </div>
                <div class="col-lg-3">
                    <button id="add_btn" style="width: 100px;" type="button" class="btn btn-info">任务添加</button>
                </div>
            </div>

        </form>

    </div>
</div>


<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
           我的任务
        </h3>
    </div>
    <div class="panel-body">
        <div id="tasks" ></div>
    </div>
</div>



<template id="myTemplate" style="display: none;">
    <div  style='margin-top: 5px;' class="alert alert-success alert-dismissable">
        <input onkeyup='do_edit(this,event)' value='' style='display: none;'></input>
        <span ondblclick='edit_content(this)'>{task}</span>
        <div style="float: right;">
            <button class="btn btn-danger" onclick='complete_task(this)'>完成</button>
            <button class="btn guys" onclick='delete_task(this)'>删除</button>
        </div>
    </div>
</template>

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">


    function add_content(){
        var task =  $("#input_task").val();
        var html = $("#myTemplate").html();
        html = html.replace("{task}", task);
        $("#tasks").append(html);
        $("#input_task").val("");
        $("#input_task").focus();
    }

    function complete_task(self){
        console.log(self);
        $(self).prev().css("color","blue");
        $(self).hide(100);
    }

    function delete_task(self){
        $(self).parent().remove();
    }

    function edit_content(self){
        $(self).hide(100);//隐藏任务名称
        $(self).prev().show(100);//显示input编辑框
        $(self).prev().val($(self).html());//将任务的名称赋给编辑框
    }

    function do_edit(self,event){
        if(event.keyCode != 13){//是不是回车键 不是跳过 是继续
            return;
        }
        $(self).hide(100);//隐藏编辑框
        $(self).next().show(100);//显示任务标题
        $(self).next().html($(self).val());//将编辑框任务的名称赋给任务名称
    }


    $(function () {
        $("#add_btn").on("click",function(){
            add_content();
        });
        $("#input_task").keyup(function(event){
            if(event.keyCode != 13){
                return;
            }
            add_content();
        });

    });

</script>
</body>
</html>